<template>
	<view>
		<uv-navbar title="发布任务" bg-color="#FFFFFF" :placeholder='true' leftIconSize="20px" leftIconColor="#313C56"
			:autoBack='true' titleStyle="font-size: 16px;font-weight: 500;color: #313c56;" />
		<uv-steps :current="stepIndex" activeColor="#EB7520" inactiveColor="#E9EAEB"
			customStyle="height: 44px; marginTop: 16px;">
			<uv-steps-item v-for="(item,index) in steps" :key="index">
				<template v-slot:title>
					<view class="font-12 font-weight-regular"
						:style="{color: stepIndex >= index ? '#313C56' : '#95A4B3'}">
						{{ item }}
					</view>
				</template>
			</uv-steps-item>
		</uv-steps>
		<swiper :current="stepIndex" style="width: 100vw;" :style="{height: $uv.addUnit(scrollHeight)}"
			:disable-touch="true">
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 100vw;" :style="{height: $uv.addUnit(scrollHeight)}">
					<taskInfo ref="taskInfo" :industry="industry" :classes="classes" @openPicker="openPicker">
					</taskInfo>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 100vw;" :style="{height: $uv.addUnit(scrollHeight)}">
					<task-amount ref="taskAmount" @openDatePicker="openDatePicker" @showPopup="showPopup"></task-amount>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 100vw;" :style="{height: $uv.addUnit(scrollHeight)}">
					<task-reward ref="taskReward"></task-reward>
				</scroll-view>
			</swiper-item>
			<swiper-item>
				<scroll-view scroll-y="true" style="width: 100vw;" :style="{height: $uv.addUnit(scrollHeight)}">
					<task-pay ref="taskPay" :list="payDatas"></task-pay>
				</scroll-view>
			</swiper-item>
		</swiper>
		<view v-if="stepIndex != 4" class="flex-row-center font-16 font-weight-regular"
			style="color: white; margin-top: 12px; margin-left: 36px; margin-right: 36px; height: 44px; background-color: #EB7520; border-radius: 22px;"
			@click="next">
			{{ stepIndex == 3 ? '支付' : '下一步' }}
		</view>
		<uv-picker ref="picker" keyName="name" round="16" cancelColor="#95A4B3" confirmColor="#EB7520"
			:columns="columns" @confirm="pickerConfirm"></uv-picker>
		<uv-datetime-picker ref="datePicker" v-model="date" mode="date" round="16px" cancelColor="#95A4B3"
			confirmColor="#EB7520" @confirm="datePickerConfirm">
		</uv-datetime-picker>
		<pay ref="pay" :payAmount="payAmount"></pay>
		<toast ref="toast"></toast>
	</view>
</template>

<script>
	import {
		getClassify,
		publishTaskBaseInfoApi,
		publishTaskAmountInfoApi
	} from "@/api/index.js"
	import taskInfo from "@/components/publish-task/task-info/task-info.vue"
	import taskAmount from "@/components/publish-task/task-amount/task-amount.vue"
	import taskReward from "@/components/publish-task/task-reward/task-reward.vue"
	import taskPay from "@/components/publish-task/task-pay/task-pay.vue"
	import pay from "@/components/pay/pay.vue"
	export default {
		components: {
			taskInfo,
			taskAmount,
			taskReward,
			taskPay
		},
		data() {
			return {
        payAmount: {},
        steps: ['任务信息', '任务金额', '追加悬赏', '支付', '完成'],
				stepIndex: 0,
				columns: [],
				date: Number(new Date()),
				// 行业数据源
				industries: [],
				industry: {},
				classes: {},
				openPickerKey: '',
				projectId: '30',
				datePicker: {},
				payDatas: [],
			}
		},
		computed: {
			statusBarHeight() {
				const sys = uni.$uv.sys()
				return sys.statusBarHeight
			},
			navbarHeight() {
				return this.statusBarHeight + 44
			},
			screenWidth() {
				const sys = uni.$uv.sys()
				return sys.windowWidth
			},
			pageHeight() {
				const sys = uni.$uv.sys()
				return sys.windowHeight - this.navbarHeight
			},
			scrollHeight() {
				return this.pageHeight - this.toolbarHeight - 70
			},
			toolbarHeight() {
				const sys = uni.$uv.sys()
				return sys.safeAreaInsets.bottom + 68
			}
		},
		onLoad() {
			this.getClassifyData()
		},
		methods: {
			/**
			 * 获取行业和类型
			 */
			getClassifyData() {
				getClassify().then((data) => {
					this.industries = [data]
				}).catch((e) => {})
			},
			openDatePicker(e) {
				this.$nextTick(() => {
					this.datePicker = e
					this.$refs.datePicker.open()
				})

			},
			datePickerConfirm(e) {
				this.$nextTick(() => {
					let val = this.$uv.timeFormat(e.value, 'yyyy-mm-dd 00:00:00')
					this.$refs.taskAmount.confirmPlanDate(val, this.datePicker)
				})
			},
			openPicker(e) {
				this.openPickerKey = e
				// 选择行业
				if (e == 'industry') {
					this.columns = this.industries
				}
				// 选择任务类别
				else if (e == 'classes') {
					if (!this.industry.name) {
						return
					}
					this.columns = [this.industry.sons]
				}
				this.$refs.picker.open()
			},

			pickerConfirm(e) {
				console.log(e)
				if (this.openPickerKey == 'industry') {
					this.industry = e.value[0]
				} else if (this.openPickerKey == 'classes') {
					this.classes = e.value[0]
				}
				console.log(this.industry)
			},
			next() {
				// 基础信息下一步
				if (this.stepIndex == 0) {
					this.publishTaskBaseInfo()
				}
				// 任务金额
				else if (this.stepIndex == 1) {
					let msg = this.$refs.taskAmount.judgeNext()
					if (msg.length == 0) {
						this.stepIndex = 2
					} else {
						this.$refs.toast.show({
							msg: msg
						})
					}
					
				}
				// 追加悬赏
				else if (this.stepIndex == 2) {
					let a = this.$refs.taskAmount.getParams()
					let b = this.$refs.taskReward.getParmas()
					const params = this.$uv.deepMerge(a, b);
					params.projectId = this.projectId
					this.publishTaskAmountInfo(params)
				}
				// 支付
				else if (this.stepIndex == 3) {
					console.log(JSON.stringify(this.$refs.taskPay.params))
					this.$refs.pay.open(this.$refs.taskPay.params)
				} else {
					this.stepIndex++
				}
			},
			/**
			 * 发布任务-发布任务信息
			 */
			publishTaskBaseInfo() {
				const params = this.$refs.taskInfo.getParams()
				publishTaskBaseInfoApi(params).then((data) => {
					this.projectId = data
					this.stepIndex = 1
				}).catch((err) => {})
			},
			/**
			 * 发布任务-发布任务金额
			 */
			publishTaskAmountInfo(params) {
				publishTaskAmountInfoApi(params).then((data) => {
					this.projectId = data
					this.stepIndex = 3
					this.$nextTick(() => {
						this.processPayDatas(params)
					})
				}).catch((err) => {})
			},

			/**
			 * 任务金额发布后处理支付页面数据
			 */
			processPayDatas(params) {
				
				let list = []
				let taskAmounts = []
				taskAmounts.push({
					title: '任务保证金',
					amount: params.projectEarnest,
					unit: 'USDT',
					select: true
				})
				let plans = JSON.parse(params.plans)
				
				for (var i = 0; i < plans.length; i++) {
					taskAmounts.push({
						title: `${this.$tools.toChinese(plans[i].plan)}期`,
						amount: plans[i].amount,
						unit: 'USDT',
						select: plans[i].plan == 1
					})
				}
				list.push({
					'title': '任务金额',
					items: taskAmounts
				})
				let notRewardSpx = (params.rewardSpx.length == 0 || parseFloat(params.rewardSpx) == 0.0)
				list.push({
					'title': '提高曝光',
					items: [{
						title: '追加悬赏',
						amount: notRewardSpx ? '0.00' : parseFloat(params.rewardSpx).toFixed(2) ,
						unit: 'SPX',
						select: !notRewardSpx
					}]
				})

				this.payDatas = list
				this.$refs.taskPay.datas = this.payDatas
				
				
				let payParams = {
					projectId: this.projectId,
					USDT: plans[0].amount,
					USDT_MARGIN: params.projectEarnest,
					SPX: notRewardSpx ? '0' : parseFloat(params.rewardSpx).toFixed(2)
				}
				this.$refs.taskPay.params = payParams
			},


			/**
			 * 弹框提示
			 */
			showPopup(msg) {
				this.$nextTick(() => {
					this.$refs.toast.show({
						msg: msg
					})
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: white;
	}
</style>